<template>
    <form action="#" class="form" v-on:submit.prevent.stop="onSubmit" method="post">
        <icon-input icon="fa-user-circle-o" placeholder="请输入昵称" id="name" type="text" required=""
                    :errorMessage="errorMessage['name']" :class="status['name']" :value="values['name']"></icon-input>
        <icon-input icon="fa-envelope-o" placeholder="请输入 Email 将作为登陆账户" id="email" type="email" required=""
                    :errorMessage="errorMessage['email']" :class="status['email']"
                    :value="values['email']"></icon-input>
        <icon-input icon="fa-lock" placeholder="请输入密码" id="password" type="password" required=""
                    :errorMessage="errorMessage['password']" :class="status['password']"
                    :value="values['password']"></icon-input>
        <icon-input icon="fa-exclamation-circle" placeholder="请确认密码" id="password_confirmation" type="password" required=""
                    :errorMessage="errorMessage['password_confirmation']" :class="status['password_confirmation']"
                    :value="values['password_confirmation']"></icon-input>
        <hr>
        <button type="submit" class="btn btn-success w-100 m-ud-10">Register</button>
        <hr>
        <router-link :to="{name: 'Login'}" class="btn btn-primary w-100 m-ud-10">Sign In</router-link>
    </form>
</template>

<script>
    /* eslint-disable no-undef */

    import IconInput from 'vue-fiu-ui/src/main/js/components/input/IconInput.vue';

    export default {
        components: {IconInput},
        name: 'Register',
        props: {
            errorMessage: {
                type: Object,
                default: () => { return {name: '', email: '', password: '', password_confirmation: ''}; }
            },
            status: {
                type: Object,
                default: () => { return {name: '', email: '', password: '', password_confirmation: ''}; }
            },
            values: {
                type: Object,
                default: () => { return {name: '', email: '', password: '', password_confirmation: ''}; }
            },
            submit: {type: Function}
        },
        methods: {
            onSubmit () {
                if (this.submit instanceof Function) {
                    let d = {
                        name: $('#name').val(),
                        email: $('#email').val(),
                        password: $('#password').val(),
                        password_confirmation: $('#password_confirmation').val()
                    };
                    this.submit(d);
                }
            }
        }
    };
</script>
